<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-if="showSearch" label-width="80px">

            <!-- <el-form-item label="" prop="newStatus">
                <el-radio-group v-model="queryParams.newStatus" size="small" @change="changeTheme" fill="#66b1ff">
                    <el-radio :label="0">未上架</el-radio>
                    <el-radio :label="1">已上架</el-radio>
                    <el-radio :label="null">所有</el-radio>
                </el-radio-group>
            </el-form-item> -->
            <el-form-item label="" prop="productNo">
                <el-input v-model="queryParams.productNo" placeholder="货号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>



            <!-- <el-form-item label="" prop="colorProperty">
                <el-input v-model="queryParams.colorProperty" placeholder="颜色属性" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item> -->


            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>

        <ux-grid border show-overflow ref="plxTable" keep-source height="750" :highlightCurrentRow="false"
            :edit-config="{ trigger: 'click', mode: 'cell' }" :data="tableData">
            <ux-table-column type="checkbox" width="60"></ux-table-column>
            <ux-table-column field="productNo" title="名字" min-width="140" edit-render>
                <template v-slot:edit="scope">
                    <el-input v-model="scope.row.productNo"></el-input>
                </template>
            </ux-table-column>
            <!-- <ux-table-column type="index" width="80"></ux-table-column>
            <ux-table-column field="name" title="名字" min-width="140" edit-render>
                <template v-slot:edit="scope">
                    <el-input v-model="scope.row.name"></el-input>
                </template>
            </ux-table-column>
            <ux-table-column field="age" title="年龄" width="160">
                <template v-slot:header="{ column }">
                    <span>{{ column.title }}</span>
                </template>
            </ux-table-column>
            <ux-table-column field="sex" title="性别" width="140" edit-render>
                <template v-slot:edit="scope">
                    <el-select v-model="scope.row.sex" @change="$refs.plxTable.updateStatus(scope)">
                        <el-option v-for="item in sexList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </template>
                <template v-slot="{ row }">{{ getLabel(row.sex) }}</template>
            </ux-table-column>
            <ux-table-column field="time" title="时间" width="140" edit-render>
                <template v-slot:edit="scope">
                    <el-time-select style="width: 100%" v-model="scope.row.time" :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'
                    }" placeholder="选择时间">
                    </el-time-select>
                </template>
            </ux-table-column>
            <ux-table-column field="address" title="地址" width="250" edit-render>
                
                <template v-slot:edit="scope">
                    <el-cascader v-model="scope.row.address" :options="options"></el-cascader>
                </template>
                
                <template v-slot="{ row }">{{ getCascader(row.address, options) }}</template>
            </ux-table-column>
            <ux-table-column field="single" title="单身狗?" width="80">
                
                <template v-slot="scope">
                    <el-switch v-model="scope.row.single" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </template>
            </ux-table-column> -->
            <ux-table-column title="操作" width="120">
                <template v-slot="{ row }">
                    <el-button @click="saveEvent(row)">保存</el-button>
                </template>
            </ux-table-column>


            <ux-table-column v-if="false" v-for="item in columns" :key="item.id" :resizable="item.resizable"
                :field="item.prop" edit-render :title="item.label" :sortable="item.sortable" :width="item.width">
                <template v-slot:edit="scope">
                    <el-input v-model="scope.row.name"></el-input>
                </template>
            </ux-table-column>
        </ux-grid>
    </div>
</template>

<script>
import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate, addTemplateAndSecondry, addProNoColorSize } from "@/api/product/template";
export default {
    data() {
        return {
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                visionShootingPlanList: null,
                productNo: null,
                manufacturerCode: null,
                newTime: null,
                newChannel: null,
                pageNum: 1,
                pageSize: 10,
                templateId: null,
                // picName: null,
                // picUrl: null,
                colorProperty: null,
                //商品计划上架时间
                merchandisePlanTime: null,
                merchandisePlanTimeStart: null,
                merchandisePlanTimeEnd: null,
                //运营计划上架时间
                operationPlanTime: null,
                operationPlanTimeStart: null,
                operationPlanTimeEnd: null,
                //采购-下单时间
                orderTime: null,
                orderTimeStart: null,
                orderTimeEnd: null,
                //采购-出货时间
                shippingTime: null,
                shippingTimeStart: null,
                shippingTimeEnd: null,
                //运营-运营预览架时间
                operationPreviewPlanTime: null,
                operationPreviewPlanTimeStart: null,
                operationPreviewPlanTimeEnd: null,
                //计划拍摄时间
                visionShootingPlan: null,
                visionShootingPlanStart: null,
                visionShootingPlanEnd: null,
                //完成拍摄时间
                visionShootingPlanMark: null,
                visionShootingPlanMarkStart: null,
                visionShootingPlanMarkEnd: null,

                //一级类目，三级类目
                firstLevelColumn: null,
                secondLevelColumn: null,
                //运营-主推款
                operationMainProducts: null,
                //商品上架时间
                newTimeStart: null,
                newTimeEnd: null,




                //采购备注
                procureRemark: null,
                newStatus: 0,
                // salePrice: null,
                // tagPrice: null,
                // logoName: null,
                // logoUrl: null,
            },
            tableData: [],
            columns: [],
            sexList: [
                { value: 1, label: '男' },
                { value: 2, label: '女' },
                { value: 3, label: '未知' }
            ],
            options: [{
                value: 'zhinan',
                label: '指南',
                children: [{
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [{
                        value: 'yizhi',
                        label: '一致'
                    }, {
                        value: 'fankui',
                        label: '反馈'
                    }, {
                        value: 'xiaolv',
                        label: '效率'
                    }, {
                        value: 'kekong',
                        label: '可控'
                    }]
                }, {
                    value: 'daohang',
                    label: '导航',
                    children: [{
                        value: 'cexiangdaohang',
                        label: '侧向导航'
                    }, {
                        value: 'dingbudaohang',
                        label: '顶部导航'
                    }]
                }]
            }]
        }
    },
    mounted() {
        // 延迟加载
        setTimeout(() => {
            this.columns = Array.from({ length: 200 }, (_, idx) => ({
                prop: 'productNo',
                id: idx,
                label: '名字' + idx,
                width: 200,
                sortable: idx === 1,
                resizable: true
            }))
            //     this.tableData = Array.from({ length: 500 }, (_, idx) => ({
            //         id: idx + 1,
            //         date: '2016-05-03',
            //         name: '张三' + idx,
            //         sex: 1,
            //         age: 18 + idx,
            //         time: '9:10',
            //         address: ['zhinan', 'shejiyuanze', 'kekong'],
            //         single: idx < 2
            //     }))
            //     // 这样设置大量数据的表格
            this.$refs.plxTable.reloadData(this.tableData)
            //     // 获取表格实例，里面可以得到列，表格数据等等
            //     console.log(this.$refs.plxTable.tableExample())
        })
    },
    created() {
        this.getList()
    },
    methods: {
        /** 查询产品一级信息列表 */
        getList() {
            listTemplate(this.queryParams).then(response => {
                this.tableData = response.rows;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 点击保存
        saveEvent(row) {
            // 判断是否发生改变
            console.log(this.$refs.plxTable.isUpdateByRow(row))
            if (this.$refs.plxTable.isUpdateByRow(row)) {
                // 局部保存，并将行数据恢复到初始状态（如果 第二个参数record 为空则不改动行数据，只恢复状态）
                // 必须执行这个，不然下次点击保存，还是保存成功哦！状态没改变哦
                this.$refs.plxTable.reloadRow(row, null, null)
                // ...保存逻辑相关（后端呀，或者前端呀）
                this.$message({
                    message: '恭喜你，保存成功',
                    type: 'success'
                });
            } else {
                this.$message({
                    message: '保存失败，你没改变当前行的数据',
                    type: 'error'
                });
            }
        },
        // 转换男女
        getLabel(val) {
            const item = this.sexList.filter(item => item['value'] === val)[0]
            return item ? item.label : ''
        },
        // 转换地址
        getCascader(value, list) {
            const values = value || []
            const labels = []
            const cascaderData = function (index, list) {
                const val = values[index]
                if (list && values.length > index) {
                    list.forEach(item => {
                        if (item.value === val) {
                            labels.push(item.label)
                            cascaderData(++index, item.children)
                        }
                    })
                }
            }
            cascaderData(0, list)
            return labels.join(' / ')
        }
    }
}
</script>